<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="bootstrap/js/bootstrap-paginator.js"></script>
</head>
<body>
<div class="container">
    <div th:replace="common/head.html"></div>
    <div th:replace="common/menu.html"></div>
    <div th:replace="common/nav.html"></div>

    <form action="javascript:void(0)" class="row-fluid" id="dataDicAddForm">
        <div class="row-fluid d-flex justify-content-around">
            <div class="col-4">
                <div>
                    <label for="inpTypeID" class="col-form-label">数据字典类别</label>
                    <select class="form-control" name="ddTypeID" id="inpTypeID">
                        <option th:value="${ddInf?.typeInf?.TypeID} ?: null"
                                th:utext="${ddInf?.typeInf?.TypeName} ?: '请选择数据字典类别'"></option>
                        <option th:each="dtItem : ${ddTypeList}" th:value="*{dtItem.TypeID}"
                                th:utext="*{dtItem.TypeName}"></option>
                    </select>
                </div>
            </div>
            <div class="col-4">
                <div>
                    <label for="inpValue" class="col-form-label">数据字典值</label>
                    <input type="text" class="form-control" name="ddValue" id="inpValue" th:value="${ddInf?.Value}"
                        required>
                </div>
            </div>
        </div>

        <div class="row-fluid d-flex justify-content-center">
            <div class="col-10">
                <label for="inpDetails" class="col-form-label">备注</label>
                <textarea class="form-control" name="ddDetails"
                          id="inpDetails" cols="100%" rows="5" th:utext="${ddInf?.Desc}"></textarea>
            </div>
        </div>

        <div class="row-fluid d-flex justify-content-center" style="margin: 20px 0">
            <div class="col-1">
                <div>
                    <input class="btn btn-success" type="submit" value="保存">
                </div>
            </div>
            <div class="col-1">
                <div>
                    <input class="btn btn-primary backBtn" type="button" value="返回">
                </div>
            </div>
            <div class="col-1">
                <div>
                    <input class="btn btn-danger" type="reset" value="重置">
                </div>
            </div>
        </div>
    </form>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="inpNullErr">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">请完善信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>所有项（除备注）均为必填项，请完善资料！</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="DBErr">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">数据库错误</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>数据库写入数据出现问题，请联系管理员进行维护！</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="sucModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">操作成功</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>数据字典信息操作成功！</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
</body>

<script th:inline="javascript">
    var Mode = [[${Mode}]];
    
    if (Mode === "add" || Mode === "Modify") {
        $("input,select,textarea").removeAttr("readonly");
    }
    
    if (Mode === "Modify") {
        $("input[name=uNo]").attr("readonly", "readonly");
        $("input[name=uPic]").removeAttr("required");
    }
</script>

<script src="js/opDataDicInf.js"></script>

</html>